<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>寻找元素内部的元素</title>
        <script type="text/javascript">
            function get1(){
                // 首先先获得父元素
                let w = document.querySelector( '.wrapper' );
                // Element.prototype.getElementsByClassName( className )
                // 在寻找指定父元素内部 class name 中包含指定值的元素
                let htmlCollecion = w.getElementsByClassName( 'even' );
                console.log( htmlCollecion );

                console.log( '- '.repeat(20) );

                // 用 Document.prototype.querySelectorAll 取得相应的元素
                let nodeList = document.querySelectorAll( '.wrapper .even' );
                console.log( nodeList );
            }

            function get2(){
                let w = document.querySelector( '.wrapper' );
                // Element.prototype.getElementsByTagName( tagName )
                let htmlCollecion = w.getElementsByTagName( 'p' );
                console.log( htmlCollecion );

                console.log( '- '.repeat(20) );

                // 用 Document.prototype.querySelectorAll 取得相应的元素
                let nodeList = document.querySelectorAll( '.wrapper p' );
                console.log( nodeList );
            }

            function get3(){
                // Document.prototype.querySelector( cssSelector )
                let w = document.querySelector( '.wrapper' );
                // Element.prototype.querySelector( cssSelector )
                let first = w.querySelector( '.odd' );
                console.log( first );

                console.log( document.querySelector( '.wrapper .odd' ) );
                
                console.log( '- '.repeat(20) );
                
                // Element.prototype.querySelectorAll( cssSelector )
                let nodeList = w.querySelectorAll( '.odd' );
                console.log( nodeList );
                console.log( document.querySelectorAll( '.wrapper .odd' ) );
            }
        </script>
    </head>
    <body>

        <h2>寻找元素内部的子元素</h2>

        <div class="buttons">
            <button onclick="get1()">getElementsByClassName</button>
            <button onclick="get2()">getElementsByTagName</button>
            <button onclick="get3()">querySelector/querySelectorAll</button>
        </div>

        <div class="wrapper">
            <h3 class="title odd">第一章: 昨天夜里</h3>
            <p>昨天夜里去哪里了</p>
            <div>难道去挖煤去了？</div>
            <h3 class="title even">第二章: 今天早上</h3>
            <p>今天早上做核算监测</p>
            <div>其实早上我是9点才起来的，做完核算监测已经11点了</div>
            <h3 class="title odd">第三章: 现在睡觉</h3>
            <p>现在虽然是上课时间，但是怎么能不睡觉呢</p>
        </div>

        <p>最后的段落</p>
        
    </body>
</html>